<template>
  <div>
    <div class="take-delivery">
      <div class="status">
        <h2 v-if="payStatus==1">您已成功下单</h2>
        <h2 v-if="payStatus==2">您已成功付款</h2>
        <div class="successInfo">
          <ul>
            <li>订单编号: <em>{{ orderInfo.orderId }}</em></li>
            <li>商品名称: <em>{{ orderInfo.productName }}</em></li>
            <li>付款金额: <em style="font-size: 20px">¥{{ orderInfo.totalPrice }}</em></li>
            <div class="user-info">
              <p>收货人：{{ orderInfo.receiverName }}</p>
              <p>联系电话：{{ orderInfo.receiverMobile }}</p>
              <p>收货地址：{{ orderInfo.receiverAddress }}</p>
            </div>
            <span style="color: red">请认真核对您的收货信息，如有错误请联系客服</span>
            <li v-if="payStatus==1">支付二维码:</li>
            <div id="qrcode" v-if="payStatus==1" style="width: 200px;height: 200px"></div>
          </ul>
<!--          <div class="option">
            <span class="info">您可以</span>
            <a href="" class="J_MakePoint">查看<span>已买到的宝贝</span></a>
            <a href="" class="J_MakePoint">查看<span>交易详情</span></a>
          </div>-->
        </div>
      </div>
    </div>


    <div class="footer">
      <div class="footer-hd">
        <p>
          <a href="#">恒望科技</a>
          <b>|</b>
          <a href="#">商城首页</a>
          <b>|</b>
          <a href="#">支付宝</a>
          <b>|</b>
          <a href="#">物流</a>
        </p>
      </div>
      <div class="footer-bd">
        <p>
          <a href="#">关于恒望</a>
          <a href="#">合作伙伴</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <em>© 2015-2025 Hengwang.com 版权所有</em>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
import {getOrderStatus} from '@/api/order';

export default {
  name: "WxPay",
  props: ['orderInfo'],
  data(){
    return{
      payStatus: 1
    }
  },
  methods: {
    qrcode() {
      if (this.payStatus==1){
        let qrcode = new QRCode('qrcode', {
          width: 200,
          height: 200, // 高度
          text: this.orderInfo.codeUrl // 二维码内容
        })
        //console.log(qrcode)
      }
    },
    isPlay() {
      //第一种实现方式
      // getOrderStatus(this.orderInfo.orderId
      // ).then(data => {
      //   const res= data.data;
      //   if (res.data === 1) {
      //     var timer=setTimeout('isPlay()', 1000);
      //   }else {
      //     clearInterval(timer);
      //     this.payStatus=2;
      //   }
      // }).catch(error=>{
      //   this.$message({
      //     message: error,
      //     type: 'error'
      //   })
      // })
      //第二种实现方式
      var webSocket = null;
      if (window.WebSocket){
        webSocket = new WebSocket("ws://localhost:8888/websocket/"+this.orderInfo.orderId);

        webSocket.onmessage = event => {
          console.log(event.data)
          if (event.data == '1') {
            webSocket.close();
            this.$message({
              message: '支付成功',
              type: 'success'
            })
            this.payStatus=2;
            delete this.orderInfo.codeUrl;
            this.$router.push('/pay?orderInfo='+JSON.stringify(this.orderInfo)+'&payStatus=2')
          }

        }

      }
    }
  },
  mounted() {
    this.qrcode();
    this.isPlay();

  }
}
</script>

<style scoped>

@import "../../assets/css/demo.css";

@import "../../assets/css/sustyle.css";

</style>